body
  margin: 0
  padding: 0
  font-family: Segoe UI, sans-serif, Roboto
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

//scrollbox
::-webkit-scrollbar
  width: 8px
  height: 8px
  background-color: #0e0e0e

::-webkit-scrollbar-track
  border-radius: 5px

::-webkit-scrollbar-thumb
  background: #a1a1a1
  border-radius: 5px

::-webkit-scrollbar-thumb:hover
  background: #a1a1a1

/* ТАБЛИЦА */
.ammo-table
  background-color: #0e0e0e
  color: #aeaeb0
  padding-bottom: 50px
  font-size: 1.1em
  min-height: 100vh

.ammo__error
  text-align: center

.caliber-select
  width: 35rem
  margin: auto
  max-width: 100vw
  display: flex
  justify-content: space-around
  flex-wrap: wrap
  padding-top: 4em
  position: relative

.caliber
  margin-left: 0.2rem
  margin-right: 0.2rem
  padding: 0.1rem 0.3rem
  background: none
  color: #aeaeb0
  border: 1px solid transparent
  cursor: pointer
  font-size: 20px

  &:hover,

  &:focus
    background-color: #9a8866
    border-radius: 3px
    color: #000

  &:focus
    outline: none
    border: 1px solid #9a8866
    border-radius: 3px

.adjoined-tables
  user-select: text
  display: flex
  flex-direction: row
  align-items: flex-end
  justify-content: center

  & thead tr th
    vertical-align: bottom

.table-wrap
  overflow-x: auto
  overflow-y: auto
  max-width: 100vw
  padding-top: 4em

.fixed-table,
.main-table
  border: none
  border-collapse: collapse
  width: 1200px

.tal
  text-align: left

.tar
  text-align: right

.fixed-table th
  text-align-last: left
  min-width: 12rem

@media (max-width: 550px)
  .ammo-table
    margin-top: 35px

  .fixed-table th
    min-width: 15rem

.main-table
  margin-top: 6rem
  overflow-x: scroll

.armor_title
  border-bottom: 2px solid #2d281e
  position: relative
  left: 5px

  &:nth-last-child(1)
    left: 0

.compare th
  min-width: 3rem
  text-align: right

th.tilted
  min-width: 4rem
  width: 4rem
  position: relative
  padding-bottom: 1.7em

th.tilted span
  display: inline-block
  margin: auto
  border-bottom: 1px solid #030

th.tilted span span
  display: block
  position: absolute
  white-space: nowrap
  transform-origin: 1rem 0
  transform: rotate(-35deg)

.clickable a
  text-decoration: none
  color: inherit
  cursor: pointer
  -moz-user-select: none
  -khtml-user-select: none
  user-select: none

  &:hover
    color: #9a8866

  & span
    display: none !important

th.spacer
  width: 6rem
  min-width: 6rem

th.smallspacer
  width: 2rem
  min-width: 2rem

.tbody td
  text-align: right

  &.left
    text-align: left

table td
  padding: 0.2rem

.tbody tr:nth-child(odd)
  background-color: #2d281e

.hr-line
  border-bottom: 2px solid #2d281e

/* CHANGE LOG */
.changelog
  position: absolute
  right: 25px
  top: 15px
  text-align: right
  color: #9a8866
  display: flex
  flex-direction: column
  align-items: flex-end
  z-index: 2

.changelog__title
  display: flex
  cursor: pointer
  &:hover
    color: #aeaeb0

.changelog__wrap
  padding: 10px 20px
  background-color: #2d281e
  color: #aeaeb0
  border-radius: 5px
  margin-top: 5px
  display: flex
  flex-direction: column
  max-width: 450px
  max-height: 800px
  overflow: auto

.changelog__commit:nth-child(1)
  margin-top: 0

.changelog__commit
  display: flex
  flex-direction: column
  line-height: 24px
  margin-top: 20px
  & p
    padding: 0
    margin: 0

.changelog__date
  font-weight: 600
  font-style: italic
  padding: 0
  margin: 0

.changelog__commit span:before
  content: "- "
  position: relative
  top: -2px

@media (max-width: 550px)
  .changelog
    right: 5px
    top: 15px
